<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>瀑布式布局</title>
  </head>
  <style>
    .waterfall {
      position: relative;
    }
    .box1 {
      width: 33.33%;
      height: 3750px;
      background-color: red;
    }
    .box2 {
      width: 33.33%;
      height: 1500px;
      background-color: yellow;
    }
    .box3 {
      width: 33.33%;
      height: 1700px;
      background-color: skyblue;
    }
    .box4 {
      width: 33.33%;
      height: 500px;
      background-color: green;
    }
    .box5 {
      width: 33.33%;
      height: 300px;
      background-color: blue;
    }
    .box6 {
      width: 33.33%;
      height: 896px;
      background-color: black;
    }
    .box7 {
      width: 33.33%;
      height: 600px;
      background-color: rebeccapurple;
    }
    .item {
      position: absolute;
    }
    .item-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      height: auto;
      font-size: 20px;
      color: #686868;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
  </style>
  <body>
    <div class="waterfall">
      <div class="item box1">
        <div class="item-content">1.三月到大理赏樱花不远不近</div>
      </div>
      <div class="item box2">
        <div class="item-content">
          2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
        </div>
      </div>
      <div class="item box3">
        <div class="item-content">
          3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆
        </div>
      </div>
      <div class="item box4">
        <div class="item-content">4.三月到大理赏樱花不远不近</div>
      </div>
      <div class="item box5">
        <div class="item-content">
          5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
        </div>
      </div>
      <div class="item box6">
        <div class="item-content">
          5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
        </div>
      </div>
      <div class="item box7">
        <div class="item-content">
          5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
        </div>
      </div>
    </div>
    <script>
      var items = document.getElementsByClassName("item");
      //定义间隙10像素
      var gap = 0;
      //进页面执行函数
      window.onload = function () {
        waterFall();
      };

      function waterFall() {
        //首先确定列数 = 页面的宽度 / 图片的宽度
        var pageWidth = getClient().width;
        var itemWidth = items[0].offsetWidth;
        var columns = parseInt(pageWidth / (itemWidth + gap));
        var arr = []; //定义一个数组，用来存储元素的高度
        for (var i = 0; i < items.length; i++) {
          if (i < columns) {
            //满足这个条件则说明在第一行，文章里面有提到
            items[i].style.top = 0;
            items[i].style.left = (itemWidth + gap) * i + "px";
            arr.push(items[i].offsetHeight);
          } else {
            //其他行，先找出最小高度列，和索引
            //假设最小高度是第一个元素
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
              //找出最小高度
              if (minHeight > arr[j]) {
                minHeight = arr[j];
                index = j;
              }
            }
            //设置下一行的第一个盒子的位置
            //top值就是最小列的高度+gap
            items[i].style.top = arr[index] + gap + "px";
            items[i].style.left = items[index].offsetLeft + "px";

            //修改最小列的高度
            //最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
            arr[index] = arr[index] + items[i].offsetHeight + gap;
          }
        }
      }

      //当页面尺寸发生变化时，触发函数，实现响应式
      window.onresize = function () {
        waterFall();
      };

      // clientWidth 处理兼容性
      function getClient() {
        return {
          width:
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth,
          height:
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight,
        };
      }
    </script>
  </body>
</html>
